<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 50px auto;
        }
        .img {
            width: 500px;
            height: 450px;
            background-color: #ff0;
            position: relative;
            background-image: url(../images/4.jpg);
            background-size: 500px 450px;
        }
        .range {
            width: 500px;
            height: 50px;
            background-color: #f00;
            position: relative;
        }
        .tips {
            width: 50px;
            height: 50px;
            background-color: #f0f;
            position: absolute;
            background-image: url(../images/4.jpg);
            background-size: 500px 450px;

            left: 0;

            /* top: 200px; */
            /* background-position: -200px -200px; */

        }
        .empty {
            width: 50px;
            height: 50px;
            background-color: #000;
            position: absolute;

            /* left: 200px; */
            /* top: 200px; */
        }
        .block {
            width: 50px;
            height: 50px;
            background-color: #666;
            position: absolute;

            -webkit-user-select: none;
        }
    </style>
</head>
<body>

    <div class="box">
        <div class="img">
            <div class="empty"></div>
            <div class="tips"></div>
        </div>
        <div class="range">
            <div class="block">222</div>
        </div>
    </div>


    <script>

        // 1 首先随机生成位置
        //    确定被挖空的位置  left / top
        //    确定提示框的位置  top  和背景图的位置

        // 2 拖拽的时候 滑块移动且提示框也移动

        // 3 验证时，允许容差  Math.abs()
        //    不通过时重新生成位置且滑块回归原始位置



        var oBox = document.querySelector('.box') ;
        var oImg = oBox.querySelector('.img') ;
        var oTips = oBox.querySelector('.tips') ;
        var oEmpty = oBox.querySelector('.empty') ;
        var oBlock = oBox.querySelector('.block') ;
        var oRange = oBox.querySelector('.range') ;


        var maxW = oImg.clientWidth - oEmpty.offsetWidth ;
        var maxH = oImg.clientHeight - oEmpty.offsetHeight ;

        randPostion() ;


        // 随机生成位置
        function randPostion() {
            // var x = rand(0 , maxW) ;  // 考虑到奥尽量靠右
            var x = rand(300 , maxW) ;  // 300随便写的
            var y = rand(0 , maxH) ;
            // 设置被挖空的位置
            oEmpty.style.cssText = `left:${x}px;top:${y}px` ;
            // 设置这个提示框的位置和背景图的位置
            oTips.style.cssText = `top:${y}px;background-position:${-x}px ${-y}px`;

        }





        // 鼠标按下
        oBlock.onmousedown = function(e) {
            var e = e || event ;
            var gapX = e.x - oBlock.offsetLeft ;
            // 鼠标移动
            oRange.onmousemove = function(ev) {
                var ev = ev || event ;
                var x = ev.x - gapX ;
                if(x < 0) x = 0 ;
                if(x > maxW) x = maxW ;
                // 滑块在移动
                oBlock.style.left = x + 'px' ;
                // 提示框也需要移动
                oTips.style.left = x + 'px' ;
            }
            document.onmouseup = function() {
                // 判断是否验证通过
                // if(oTips.style.left === oEmpty.style.left) {
                if(Math.abs(oTips.offsetLeft - oEmpty.offsetLeft) <= 5) {
                    // alert('ok') ;
                    location.href = 'http://www.jd.com' ;
                } else {
                    // alert('err') ;
                    // 重新生成位置
                    randPostion() ;
                    // 滑块回归
                    oBlock.style.left = 0 ;
                }
                oRange.onmousemove = null ;
                document.onmouseup = null ;
            }
        }



        function rand(min , max) {
            return parseInt(Math.random() * (max - min) + min) ;
        }


    </script>
    
</body>
</html>